{extend name="common:base" /}

{block name="page_current"}
<div class="fui-page-group statusbar">
    <style>
        #file-avatar {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 9;
            background: red;
            width: 100%;
        }
        .fui-list-img{
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-shrink: 0;
            -ms-flex: 0 0 auto;
            -webkit-flex-shrink: 0;
            flex-shrink: 0;
            -webkit-box-lines: single;
            -moz-box-lines: single;
            -webkit-flex-wrap: nowrap;
            flex-wrap: nowrap;
            box-sizing: border-box;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            margin-right: .6rem;
            color: #aaa;
            position: relative;
            margin-right: 0;
        }
        .fui-list-img img{
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
        }
        .fui-cell-group .fui-cell  .fui-cell-remark.down:after {
            -webkit-transform: rotate(135deg);
            -ms-transform: rotate(135deg);
            transform: rotate(135deg);
            top:-.1rem;
        }
    </style>
    <div class="fui-page fui-page-current">
        <div class="fui-header">
            <div class="fui-header-left">
                <a class="back" href="javascript:history.back()"></a>
            </div>
            <div class="title">会员资料</div>
            <div class="fui-header-right">&nbsp;</div>
        </div>

        <div class="fui-content">
            <!--
            <div id='btn-getinfo' class='text-danger' style="text-decoration: underline;text-align: right;padding-right: .6rem;padding-top: .3rem">读取微信资料</div>
            -->
            <div class="fui-list-group">
                <input type="file" name="file-avatar" id="file-avatar">
                <div class="fui-list" id="btn-avatar">
                    <div class="fui-list-inner" style="color: #666;">头像</div>
                    <div class="fui-list-img">
                        <img src="{$memberModel['avatar']}" id="avatar" data-wechat="" data-filename="" onerror="this.src='__STATIC__/imgs/noface.png';">
                    </div>
                    <div class="angle"></div>
                </div>
            </div>
            <div class="fui-cell-group">
                <div class="fui-cell must ">
                    <div class="fui-cell-label">修改昵称</div>
                    <div class="fui-cell-info">
                        <input type="text" class="fui-input" id="nickname" placeholder="请输入您的昵称" value="{$memberModel['nickname']}">
                    </div>
                </div>
            </div>
            <div class="fui-cell-group">
                <div class="fui-cell must">
                    <div class="fui-cell-label">手机号</div>
                    <div class="fui-cell-info c000">{$memberModel['mobile']}(已绑定)</div>
                    <input type="hidden" name="mobile" id="mobile" value="{$memberModel['mobile']}">
                    <a class="fui-cell-remark" href="{:url('Member/bind')}">更换绑定</a>
                </div>
            </div>


            <div class="fui-cell-group">
                <div class="fui-cell must ">
                    <div class="fui-cell-label ">姓名</div>
                    <div class="fui-cell-info c000">
                        <input type="text" class="fui-input" id="realname" name="realname" placeholder="请输入您的姓名" value="{$memberModel['realname']}">
                    </div>
                </div>

                <!--
                <div class="fui-cell">
                    <div class="fui-cell-label">微信号</div>
                    <div class="fui-cell-info c000"><input type="text" class="fui-input" id="weixin" name="weixin" placeholder="请输入您的微信号" value=""></div>
                </div>
                <div class="fui-cell">
                    <div class="fui-cell-label">出生日期</div>
                    <div class="fui-cell-info c000"><input type="text" class="fui-input" id="birthday" name="birthday" placeholder="请选择出生日期" value="" readonly="readonly"></div>
                    <div class="fui-cell-remark down"></div>
                </div>
                <div class="fui-cell">
                    <div class="fui-cell-label ">所在城市</div>
                    <div class="fui-cell-info c000"><input type="text" class="fui-input" id="city" name="city" placeholder="请选择城市" value="" data-value="" readonly="readonly"></div>
                    <div class="fui-cell-remark down"></div>
                </div>
                -->
            </div>
            <a href="#" id="btn-submit" class="btn btn-danger block mtop">确认修改</a>
        </div>
    </div>
    <script>
        var postdata;
        $(function () {
            $('#btn-submit').click(function() {
                if ($('#nickname').isEmpty()) {
                    FoxUI.toast.show('请填写昵称');
                    return
                }
                if ($('#realname').isEmpty()) {
                    FoxUI.toast.show('请填写姓名');
                    return
                }
                if ($(this).attr('submit')) {
                    return
                }
                $(this).html('处理中...').attr('submit', 1);
                postdata = {
                    'realname': $('#realname').val(),
                    'nickname': $('#nickname').val(),
                    'avatar': $('#avatar').data('filename')
                };
                core.json('{:url("info")}', postdata, function(json) {
                    FoxUI.loader.hide();
                    if (json.code != 1) {
                        $('#btn-submit').html('确认修改').removeAttr('submit');
                        FoxUI.toast.show('保存失败!')
                    }
                    else{
                        FoxUI.toast.show('保存成功');
                        history.back()
                    }
                }, true, true)
            })

            $("#btn-getinfo").unbind('click').click(function() {
                FoxUI.confirm("确认使用微信昵称、头像吗？<br>使用微信资料保存后才生效", function() {
                    var nickname = $.trim($("#nickname").data('wechat'));
                    var avatar = $.trim($("#avatar").data('wechat'));
                    $("#nickname").val(nickname);
                    $("#avatar").attr('src', avatar).data('filename', avatar)
                })
            });
            $("#file-avatar").change(function() {
                var fileid = $(this).attr('id');
                FoxUI.loader.show('mini');
                $.ajaxFileUpload({
                    url: core.getUrl('util/uploader'),
                    data: {
                        file: fileid
                    },
                    secureuri: false,
                    fileElementId: fileid,
                    dataType: 'json',
                    success: function(res) {
                        if (res.error == 0) {
                            $("#avatar").attr('src', res.url).data('filename', res.filename)
                        } else {
                            FoxUI.toast.show("上传失败请重试")
                        }
                        FoxUI.loader.hide();
                        return
                    }
                })
            })
        })
    </script>
</div>
{/block}
